<!--
 * @Date: 2021-01-19 14:50:15
 * @Description:
 * @LastEditors: zhangzhanhua
-->
<template>
  <div class="disk" style="height: 100%">
    <div class="close" @click="closeD">
      <!-- <i class="el-icon-close"></i> -->
    </div>
    <div class="headMenu">
      <div class="searchform">
        <el-input v-model="queryInfo.filename" placeholder="请输入内容" size="mini" clearable=""></el-input>
        <el-button size="mini" type="primary" @click="getListData()" style="margin-left: 10px">搜索</el-button>
      </div>
      <div style="float: right; height: 4%; right: 24px; position: relative">
        <el-upload style="float: left; margin-right: 10px" action="" accept="" :beforeUpload="beforeUpload" :httpRequest="httpRequest" :fileList="fileList" :show-file-list="false">
          <el-button size="mini" type="primary">上传</el-button>
        </el-upload>
        <el-button size="mini" @click="handleDownLoad">下载</el-button>
        <el-button size="mini" @click="share">分享</el-button>
        <el-button size="mini" @click="reName">重命名</el-button>
        <el-button size="mini" @click="deleteFile">删除</el-button>
      </div>
    </div>
    <div class="content">
      <div style="height: 100%; position: relative">
        <div class="mask" v-if="showPersonData" @click="
            () => {
              this.showPersonData = false;
            }
          "></div>
        <div style="
            padding: 10px 15px;
            font-size: 14px;
            color: #606266;
            height: 15px;
          ">
          <span>全部文件</span>
          <span style="float: right">已全部加载，共 {{ this.total }} 个</span>
        </div>
        <div class="selectPerson" v-if="showPersonData" ref="selectPerson">
          <div class="searchform" style="margin:20px">
            <el-input v-model="personName" placeholder="请输入人员名称查询" size="mini" clearable></el-input>
            <el-button size="mini" type="primary" @click="getUserList()" style="margin-left: 10px">搜索</el-button>
            <el-button size="mini" type="primary" @click="shareFile()" style="margin-left: 10px">分享</el-button>
          </div>
          <el-table :data="personData" style="width: 100%; height: calc(100% - 137px); overflow-y: scroll" @selection-change="newhandleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="name" label="姓名"> </el-table-column>
            <el-table-column prop="accNo" label="账号"> </el-table-column>
          </el-table>
          <div class="page" style="height:46px">
            <el-pagination background @size-change="personDataQueryInfoChange" @current-change="personDataQueryInfoSizeChange" :page-sizes="[10, 15, 30, 45]" :page-size="personDataQueryInfo.pagesize" :current-page="personDataQueryInfo.startpage" layout="total, sizes, prev, next" :total="personDataQueryInfo.allNUm">
            </el-pagination>
          </div>
        </div>
        <el-table @cell-mouse-enter="enter" @cell-mouse-leave="leave" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%; height: calc(100% - 88px)" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="文件名" width="270" prop="fileName" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="" width="150" prop="fileName">
            <template slot-scope="scope">
              <div class="samllIcon" v-if="showClickIcon == true && scope.row.id == rowid">
                <el-tooltip class="item" content="重命名" placement="top">
                  <i class="iconfont icon-zhongmingming" @click="newRename" :size="23"></i>
                </el-tooltip>
                <el-tooltip class="item" content="下载" placement="top">
                  <i class="iconfont icon-2-02" @click="newDown" :size="23"></i>
                </el-tooltip>
                <el-tooltip class="item" content="分享" placement="top">
                  <i class="iconfont icon-2-03" @click="share" :size="23"></i>
                </el-tooltip>
                <el-tooltip class="item" content="删除" placement="top">
                  <i class="iconfont icon-2-04" @click="newDel" :size="23"></i>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="fileSize" label="大小" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="createTime" label="修改时间" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="sourceName" label="文件来源" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <div class="page" style="width:98%">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 15, 30, 45]" :page-size="queryInfo.pagesize" :current-page="queryInfo.startpage" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="historyM" v-if="dispatchIsShow">
      <el-card class="box-card">
        <div slot="header" class="clearfix" style="padding: 5px">
          <span>重命名</span>
        </div>
        <div>
          <el-input clearable size="mini" placeholder="请输入名称" v-model="renameInput" style="width: 150px"></el-input>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dispatchIsShow = false" size="mini">取 消</el-button>
            <el-button type="primary" @click="surereName()" size="mini">确 定</el-button>
          </span>
        </div>
      </el-card>
    </div>
    <div class="historyM" v-if="dispatchIsShow1">
      <el-card class="box-card">
        <div slot="header" class="clearfix" style="padding: 5px">
          <span>重命名</span>
        </div>
        <div>
          <el-input clearable size="mini" placeholder="请输入名称" v-model="renameInput" style="width: 150px"></el-input>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dispatchIsShow1 = false" size="mini">取 消</el-button>
            <el-button type="primary" @click="surereName1()" size="mini">确 定</el-button>
          </span>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      multipleSelection: [],
      showPersonData: false,
      personName: "",
      personData: [],
      dispatchIsShow1: false,
      showClickIcon: false,
      showInfo: false,
      rowid: "",
      rowData: [],
      showIcon: false,
      total: 0,
      renameInput: "",
      dispatchIsShow: false,
      fileList: [],
      tableData: [],
      queryInfo: {
        startpage: 1,
        pagesize: 10,
        filename: "",
      },
      personDataQueryInfo: {
        startpage: 1,
        pagesize: 10,
        allNUm: 0,
      },
    };
  },
  props: {
    close: {
      type: Function,
    },
  },
  watch: {},
  created() {
    this.getListData();
    this.getUserList();
  },
  mounted() { },
  methods: {
    //关闭
    closeD() {
      this.close();
    },
    getUserList() {
      this.$http
        .get(
          `/${this.$ServiceName}/api/external/im/${this.$version}/listuserpage`,
          {
            params: {
              username: this.personName,
              startpage: this.personDataQueryInfo.startpage,
              pagesize: this.personDataQueryInfo.pagesize,
            },
          }
        )
        .then((res) => {
          if (res.data.code != "0000") {
            // return this.$message.error(res.data.msg)
            console.log(res);
          }
          this.personData = res.data.data.pages;
          this.personDataQueryInfo.allNUm = res.data.data.totalNum;
          // this.$store.commit("USER_DATA", res.data.data);
          // this.personForm = res.data.data
        });
    },
    handleSizeChange(val) {
      this.queryInfo.pagesize = val;
      this.getListData();
    },
    handleCurrentChange(val) {
      this.queryInfo.startpage = val;
      this.getListData();
    },

    //分享人列表查询
    personDataQueryInfoChange(val) {
      this.personDataQueryInfo.pagesize = val;
      this.getUserList();
    },
    personDataQueryInfoSizeChange(val) {
      this.personDataQueryInfo.startpage = val;
      this.getUserList();
    },
    async deleteFile() {
      await this.$http
        .delete(
          `/${this.$ServiceName}/api/external/protected/file/deletefile?id=${this.stringIds}`
        )
        .then((res) => {
          this.$message.success("删除成功～");
          this.getListData();
        })
        .catch((error) => {
          // this.loading = false;
        });
    },
    //文件下载
    async handleDownLoad() {
      if (this.fileLength != 1) {
        this.$message.error("请选择且只能选择一个文件～");
        return;
      }
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/protected/file/down?id=${this.multipleSelection[0].id}`,
        {
          responseType: "arraybuffer",
          params: {
            token: window.sessionStorage.getItem("token"),
          },
        }
      );
      if (res.data.code && res.data.code != "0000") {
        return this.$message.error(res.data.msg);
      }
      const content = res.data;
      const blob = new Blob([content]); // 构造一个blob对象来处理数据
      const link = document.createElement("a"); // 创建a标签
      if (this.multipleSelection[0].fileName != undefined) {
        link.download = this.multipleSelection[0].fileName; // a标签添加属性
      } else {
        link.download = this.multipleSelection[0].name; // a标签添加属性
      }
      link.style.display = "none";
      link.href = URL.createObjectURL(blob, {
        type: `application/pdf`,
      });
      document.body.appendChild(link);
      link.click(); // 执行下载
      URL.revokeObjectURL(link.href); // 释放url
      document.body.removeChild(link); // 释放标签
      this.getListData();
    },
    //文件重命名
    surereName() {
      this.$http
        .put(`/${this.$ServiceName}/api/external/protected/file/rename`, {
          id: this.multipleSelection[0].id,
          fileName: this.renameInput,
        })
        .then((res) => {
          this.$message.success("文件名修改成功～");
          this.dispatchIsShow = false;
          this.renameInput = "";
          this.getListData();
        })
        .catch((error) => {
          // this.loading = false;
        });
    },
    reName() {
      this.dispatchIsShow = true;
      this.renameInput = this.multipleSelection[0].fileName;
      if (this.fileLength != 1) {
        this.$message.error("请选择且只能选择一个文件～");
        this.dispatchIsShow = false;
        return;
      }
    },
    shareFile() {
      var params = {
        idList: this.ids,
        shareUserList: this.shareList
      }
      this.$http
        .post(`/${this.$ServiceName}/api/external/protected/file/sharefile`, params)
        .then((res) => {
          this.$message.success("文件分享成功～");
          this.showPersonData = false
          this.getListData();
        })
        .catch((error) => {
          // this.loading = false;
        });
    },
    newhandleSelectionChange(val) {
      this.newmultipleSelection = val;
      console.log(this.newmultipleSelection, "this.newmultipleSelection");
      this.shareList = [];
      for (var i = 0; i < this.newmultipleSelection.length; i++) {
        var obj = {};
        obj.shareBy = this.newmultipleSelection[i].id;
        // obj.weightHouseId = parseFloat(res.data.data[i].id);
        obj.shareName = this.newmultipleSelection[i].name;
        this.shareList.push(obj);
      }
      console.log(this.shareList)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.fileLength = this.multipleSelection.length;
      console.log(this.multipleSelection);

      this.ids = [];
      var that = this;
      val.map((n) => {
        that.ids.push(n.id);
      });
      this.ids = this.uniq(that.ids);
      console.log(this.ids);
      this.stringIds = this.ids.toString();
      console.log(this.stringIds);
    },
    uniq(array) {
      var temp = []; //一个新的临时数组
      for (var i = 0; i < array.length; i++) {
        if (temp.indexOf(array[i]) == -1) {
          temp.push(array[i]);
        }
      }
      return temp;
    },
    // 查询数据table
    async getListData() {
      // this.loading = true;
      await this.$http
        .get(`/${this.$ServiceName}/api/external/protected/file/listnetdisc`, {
          params: this.queryInfo,
        })
        .then((res) => {
          this.tableData = res.data.data.pages;
          this.total = res.data.data.totalNum;
          this.queryInfo.startpage = res.data.data.pageNum;
          this.queryInfo.pagesize = res.data.data.pageSize;
        })
        .catch((error) => {
          // this.loading = false;
        });
    },
    beforeUpload(file, value) {
      const isLt2M = file.size / 1024 / 1024 < 100;
      if (!isLt2M) {
        this.$message({
          message: "上传文件大小不能超过 100MB!",
          type: "warning",
        });
        return false;
      }
    },
    //附件上传
    httpRequest(params) {
      this.$notify.info({
        title: "提示",
        message: "文件正在上传",
      });
      let file = params.file;
      let FormDatas = new FormData();
      FormDatas.append("fileArray", file);
      FormDatas.append("businessType", "09"); //文件夹名称
      // FormDatas.append('fileType', 'pdf') //文件类型
      this.$http
        .post(
          `/${this.$ServiceName}/api/external/protected/file/uploadnetdisc`,
          FormDatas
        )
        .then((res) => {
          // let dataFile = res.data.data
          this.$notify.success({
            title: "成功",
            message: "文件上传成功",
          });
          this.getListData();
          // console.log('attachmentList',this.transferData.attachmentList)
        });
    },
    enter(row, column, cell) {
      console.log(row)
      this.showClickIcon = true;
      this.rowid = row.id; //赋值行id，便于页面判断
      this.rowFileId = row.fileId;
      this.rowData = row; //把行数据赋值，用于后续操作
      this.tablefileName = row.fileName;
    },
    leave(row, column, cell) {
      this.showClickIcon = false;
    },
    //table重命名
    newRename() {
      this.dispatchIsShow1 = true;
      this.renameInput = this.rowData.fileName;
    },
    surereName1() {
      this.$http
        .put(`/${this.$ServiceName}/api/external/protected/file/rename`, {
          id: this.rowid,
          fileName: this.renameInput,
        })
        .then((res) => {
          this.$message.success("文件名修改成功～");
          this.dispatchIsShow1 = false;
          this.renameInput = "";
          this.getListData();
        })
        .catch((error) => {
          // this.loading = false;
        });
    },
    //table下载
    async newDown() {
      const res = await this.$http.get(
        `/${this.$ServiceName}/api/external/protected/file/down?id=${this.rowFileId}`,
        {
          responseType: "arraybuffer",
          params: {
            token: window.sessionStorage.getItem("token"),
          },
        }
      );
      if (res.data.code && res.data.code != "0000") {
        return this.$message.error(res.data.msg);
      }
      const content = res.data;
      const blob = new Blob([content]); // 构造一个blob对象来处理数据
      const link = document.createElement("a"); // 创建a标签
      if (this.tablefileName != undefined) {
        link.download = this.tablefileName; // a标签添加属性
      } else {
        link.download = this.tablefileName; // a标签添加属性
      }
      link.style.display = "none";
      link.href = URL.createObjectURL(blob, {
        type: `application/pdf`,
      });
      document.body.appendChild(link);
      link.click(); // 执行下载
      URL.revokeObjectURL(link.href); // 释放url
      document.body.removeChild(link); // 释放标签
      this.getListData();
    },
    //table删除
    async newDel() {
      await this.$http
        .delete(
          `/${this.$ServiceName}/api/external/protected/file/deletefile?id=${this.rowid}`
        )
        .then((res) => {
          this.$message.success("删除成功～");
          this.getListData();
        })
        .catch((error) => {
          // this.loading = false;
        });
    },
    //table分享
    newShare() { },
    //文件分享
    share() {
      if (this.multipleSelection.length != 0) {
        this.showPersonData = true;
      } else {
        this.$message.info("请先选择文件");
      }
      // this.$nextTick(()=>{
      //    document.addEventListener('click', this.cleanRow, false)
      // })
    },
    //点击外面移除表格选中时间
    // cleanRow(e) {
    //   console.log(this.$refs.selectPerson);
    //   let isSelf = this.$refs.selectPerson.contains(e.target);
    //   if (isSelf) {
    //     console.log('11');
    //   } else {
    //     console.log('22');
    //     this.showPersonData = false
    //     document.removeEventListener('click', this.cleanRow, false)
    //   }
    // },
  },
};
</script>

<style lang="less" scoped>
.disk {
  position: relative;
}
.close {
  position: absolute;
  cursor: pointer;
  right: 15px;
  top: 14px;
  z-index: 777;
}
.mask {
  position: absolute;
  top: 66px;
  left: 0;
  width: 100%;
  height: calc(100% - 66px);
  background: rgba(0, 0, 0, 0.1);
  z-index: 888;
}

.el-input__inner {
  width: 180px;
}
.el-card__header {
  padding: 5px;
}
.historyM {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.headMenu {
  padding: 0px 15px;
  display: flow-root;
  position: relative;
  top: 15px;
  height: 42px;
  line-height: 27px;
}
.searchform {
  // width: 200px;
  float: left;
  display: flex;
  margin: 5px 10px 0 5px;
}
.content {
  height: calc(100% - 45px);
  overflow: hidden;
}
.content ul {
  width: 100%;
}
.content ul li {
  float: left;
  list-style: none;
}
.page {
  position: absolute;
  background: #ffffff;
  border-radius: 4px 4px 0 0;
  right: 0;
  padding-right: 1rem;
  height: 51px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  bottom: 2px;
}
.samllIcon {
  float: right;
}
.samllIcon i {
  padding-right: 10px;
  font-size: 18px;
}
.selectPerson {
  position: absolute;
  /* float: right; */
  height: calc(100% - 67px);
  right: 0;
  z-index: 99999;
  width: 350px;
  // height: 100%;
  background: white;
  border-left: 1px solid #f0f0f0;
  box-shadow: -1px 0px 0px 0px #f0f0f0;
}
</style>
